<template>
    <div class="food">
        <div class="back" @click="goBack"></div>
        <div class="image-header">
          <img :src="productPhoto" @error="error" class="image">
        </div>
        <div class="content">
          <div class="title">{{productDetail.productName}}</div>
          <div class="detail">
            {{productDetail.model}}
          </div>
          <div class="price">
            <span class="flag">&yen;</span>{{productDetail.salePrice}}/{{ getUnitName(productDetail) }}
            <addCart :productdetail="productDetail" />
          </div>
        </div>
        <div class="detailBox">
          <div class="title">详情</div>
          <div class="desc" v-html="productDetail.content"></div>
        </div>
        <div class="commentBox">
          <div class="title">评价</div>
          <commentList :reviewlist="reviewList" />
        </div>
        <cartControl/>
    </div>
</template>
<script>
import commentList from '@/components/detail/commentList.vue'
import addCart from '@/components/detail/addCart.vue'
import cartControl from '@/components/common/cartControl.vue'
import {GetProductById} from '@/api/order'
import {GetProductReviewList} from '@/api/comment'
import {baseURL} from '@/api/config'
export default {
  name: 'Detail',
  components: {
    commentList,
    addCart,
    cartControl
  },
  data () {
    return {
      baseURL,
      productPhoto:'',
      productDetail: {},
      reviewList:[]
    }
  },
  created(){
    this.getProductDetail()
    this.getProductReviewList()
  },
  methods:{
    error(){
      this.productPhoto = require('@/assets/logo.png')
    },
    /**
     * @description 返回
     */
    goBack() {
      this.$router.go(-1)
    },
    getUnitName(item){
      return item.baseUnit?.unitName
    },
    async getProductDetail(){
      let productId = this.$route.query.id 
      let { returnData = false }  = await GetProductById({ productId })
      if(returnData == false) return
      this.productDetail = returnData
      this.productPhoto = baseURL + this.productDetail.mainImageUrl
    },
    async getProductReviewList(){
      let param = {
        //ShopId: this.$store.state.tableInfo.tableId,
        ProductId: this.$route.query.id,
        State: 1,
        PageIndex: 1,
        PageSize: 2
      }
      let { returnData = false }  = await GetProductReviewList(param)
      if(returnData == false) return
      this.reviewList = returnData.data
    }
  }
}
</script>
<style>
	body {
		background: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
  .food{
      position: relative;
      .back{
        position: fixed;
        z-index: 1;
        top: 0.5rem;
        left: 0.5rem;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .8);
        &:after {
          position: absolute;
          left: 0.6rem;
          top: 50%;
          content: '';
          width: 0.6rem;
          height: 0.6rem;
          border-top: 1px solid #fff;
          border-left: 1px solid #fff;
          -webkit-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
        }
      }
      .image-header{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        .image{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .content{
        padding: 5.3%;
        background-color: #fff;
        .title{
          font-size: 0.75rem;
          font-weight: 700;
          line-height: 2;
        }
        .detail{
          font-size: 0.75rem;
          line-height: 1.5;
          color: #929292;
        }
        .price{
          position: relative;
          font-size: 1rem;
          line-height: 1.2;
          padding-top: 0.5rem;
          .flag{
            font-size: 0.6rem;
          }
          .addCart{
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
      .detailBox{
        margin-top: 0.5rem;
        background-color: #fff;
        padding: 5.3%;
        .title{ font-size: 0.75rem; padding-bottom: 2.4%;}
        .desc{ font-size: 0.6rem; line-height: 1.5; overflow: hidden;}
      }
      .commentBox{
        margin-top: 0.5rem;
        background-color: #fff;
        padding: 5.3%;
        padding-bottom: calc(5.3% + 2.25rem);
        .title{ font-size: 0.75rem; padding-bottom: 2.4%;}
      }
  }
</style>